<!--
 * @Description  : 预览
 * @Author       : zhao
 * @Date         : 2022-07-20 09:38:05
 * @LastEditors  : zhao
 * @LastEditTime : 2023-01-16 14:47:17
-->

<template>
    <div class='Preview' v-if="dialogVisible">
        <el-dialog :close-on-click-modal="false" v-model="dialogVisible" :fullscreen="true" title="文件预览">
            <div class="agreement_picture">
                <div v-if="preview.val.type == 'application/pdf'">

                    <iframe width="100%" :src="preview.val.url" frameborder="0"
                        style="width: 100%; height:calc(144vh )"></iframe>
                </div>
                <!-- <zpdf v-if="preview.val.type == 'application/pdf'" /> -->

                <zdocx v-if="preview.val.type == 'application/msword'" />

                <div v-if="preview.val.type == 'image/jpeg'">
                    <img :src="preview.val.url" alt="">
                </div>
                <div v-if="preview.val.type == 'image/png'">
                    <img :src="preview.val.url" alt="">
                </div>
            </div>
        </el-dialog>

    </div>
</template>

<script setup>
import zpdf from "./pdf.vue"
import zdocx from "./docx.vue"
import { ref, watch, reactive, toRef, } from 'vue';
import { toRaw } from '@vue/reactivity'
import { usePreview } from '/@/stores/preview'

const usepreviews = usePreview()
const { previewType } = usePreview()

let dialogVisible = ref(false)
let preview = reactive({
    val: {}
})

watch(dialogVisible, (newVal, oldValue) => {

    preview.val = toRaw(previewType)
}, { deep: true, immediate: true, });
defineExpose({
    dialogVisible,
});
</script>
<style lang='scss' scoped>
.el-dialog {
    height: 100%;


}
.agreement_picture{
    text-align: center;
}
::v-deep(.el-dialog__body) {
    min-height: calc(100% - 100px) !important;
}
</style>